<!--// 멀티스킨 사용을 위해 변수 또는 ID 랜덤 지정 -->
{@$skin_id = "AnyTslider".mt_rand()}
{@$slider_id = $skin_id}
<!--%import("css/anythingslider.css")-->

<!--@if($colorset == "metallic")-->
	<!--%import("css/theme-metallic.css")-->
<!--@end-->

<!--// prettyPhoto 테마 -->
<!--@if(!$widget_info->ptypoto_theme)-->
{@$prettyPhoto_theme = "pp_default"}
<!--@else-->
{@$prettyPhoto_theme = $widget_info->ptypoto_theme}
<!--@end-->

<!--// jwplayer.js 를 다른 위젯에서 사용하고 있는지 체크 -->
{@$nayjs=0}
<!--@foreach(Context::getJsFile() as $key => $jsfile)-->
	{@$filename = strtolower($jsfile['file'])}
	<!--@if(substr($filename,0,2)=='./')-->
		{@$filename = substr($filename,2)}
	<!--@end-->
	<!--@if(preg_match('/jwplayer.js/',$filename))-->
		{@$nayjs=1}
	<!--@end-->
<!--@end-->
<!--@if($nayjs==0)-->
	<!--%import("js/jwplayer.js")-->
<!--@end-->

<!--%import("js/jquery.anythingslider.js")-->
<!--%import("../prettyPhoto/prettyPhoto.css")-->
<!--%import("../prettyPhoto/jquery.prettyPhoto.js")-->

<!--// 제목 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->title_font_size)-->
{@$title_font_size = $widget_info->title_font_size}
<!--@else-->
{@$title_font_size = 15}
<!--@end-->

<!--@if($widget_info->title_font_color)-->
{@$title_font_color = $widget_info->title_font_color}
<!--@else-->
{@$title_font_color = '#222'}
<!--@end-->

<!--@if($widget_info->title_font_family!="Default")-->
{@$title_font_family = $widget_info->title_font_family}
<!--@else-->
{@$title_font_family = "굴림,'Trebuchet MS',Arial,Helvetica,san-serif"}
<!--@end-->

<!--// 제목 폰트 직접 입력인 경우 -->
<!--@if($widget_info->title_font_user!="")-->
{@$title_font_family = $widget_info->title_font_user}
<!--@end-->

<!--// 제목+카테고리 높이(50px) -->
<!--@if(!$widget_info->title_height)-->
{@$textT1_Height = 23}
<!--@else-->
{@$textT1_Height = $widget_info->title_height}
<!--@end-->

<!--// 내용의 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->content_font_size)-->
{@$content_font_size = $widget_info->content_font_size}
<!--@else-->
{@$content_font_size = 13}
<!--@end-->

<!--@if($widget_info->content_font_color)-->
{@$content_font_color = $widget_info->content_font_color}
<!--@else-->
{@$content_font_color = '#666'}
<!--@end-->

<!--@if($widget_info->content_font_family!="Default")-->
{@$content_font_family = $widget_info->content_font_family}
<!--@else-->
{@$content_font_family = "굴림,Arial, Helevtica, Verdana, san-serif"}
<!--@end-->

<!--// 내용 폰트 직접 입력인 경우 -->
<!--@if($widget_info->content_font_user!="")-->
{@$content_font_family = $widget_info->content_font_user}
<!--@end-->

<!--// 내용 높이(50px) -->
<!--@if(!$widget_info->content_height)-->
{@$textC1_Height = 50}
<!--@else-->
{@$textC1_Height = $widget_info->content_height}
<!--@end-->

{@$playerinfo = getSiteUrl()."widgets/contentslider/skins/AnythingSlider/js/player.swf"}
{@$textsliderwidth = $widget_info->slider_img_width-10}
<!--@if($widget_info->show_control=='Y')-->{@$controlbutton=45}<!--@else-->{@$controlbutton=0}<!--@end-->
<!--@if($widget_info->show_control=='Y' && $colorset == "default")-->{@$control_width=74}
<!--@elseif($widget_info->show_control=='Y' && $colorset == "metallic")-->{@$control_width=45}<!--@else-->{@$control_width=0}<!--@end-->
<!--@if($widget_info->navigation_control=='Y' && $colorset == "default")-->{@$navigationbutton_height=26}
<!--@elseif($widget_info->show_control=='Y' && $colorset == "metallic")-->
{@$navigationbutton_height=4}<!--@else-->{@$navigationbutton_height=0}<!--@end-->

{@$slider_img_width = $widget_info->slider_img_width+$control_width}
{@$slider_img_height = $widget_info->slider_img_height+$navigationbutton_height}
{@$skincssimgpath = getSiteUrl()."widgets/contentslider/skins/AnythingSlider/images"}

<style type="text/css">
.textT1_{$skin_id}, .textT1_{$skin_id} a, .textT1_{$skin_id} a:visited {
	color:{$title_font_color};
	font-family: {$title_font_family};
	font-size: {$title_font_size}px;
	font-weight: bold;
	text-decoration: none;
	height: {$textT1_Height}px;
	<!--@if($widget_info->show_title=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textT1_{$skin_id} a:hover, .textT1_{$skin_id} a:focus {
	text-decoration: underline;
}

.textC1_{$skin_id}, .textC1_{$skin_id} a, .textC1_{$skin_id} a:visited {
	text-align:justify;
	color:{$content_font_color};
	font-family: {$content_font_family};
	font-size: {$content_font_size}px;
	font-weight: normal;
	text-decoration: none;
	height: {$textC1_Height}px;
	<!--@if($widget_info->show_content=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textC1_{$skin_id} a:hover, .textC1_{$skin_id} a:focus {
	text-decoration: underline;
}

div.anythingSlider {
	position: relative;
	width: {$slider_img_width}px; /* 전체 넓이 */
	height: {$slider_img_height}px; /* 전체 높이 */
	margin: 0 auto;
	<!--@if($widget_info->show_control=='Y' && $colorset == "default")-->
	padding: 0 45px 28px 45px;
	<!--@elseif($widget_info->show_control=='N' && $colorset == "default")-->
	padding: 0 0px 28px 0px;
	<!--@end-->
}
div.textSlide     { padding: 5px;}
div.textSlide h3  { text-transform: uppercase; margin: 10px 0; }
div.textSlide p   { width: {$slider_img_width-10}px;}

div.anythingSlider .arrow a {
	width: {$controlbutton}px;
}


#{$skin_id} .lightbox_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/magnify.png') no-repeat center center;
}

#{$skin_id} .lightbox_video {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/video.png') no-repeat center center;
}

#{$skin_id} .no_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/no_image.png') no-repeat center center;
}

#{$skin_id} .open_doc {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/document.png') no-repeat center center;
}

</style>

<!--@if($widget_info->content_items_shuffle=='Y')-->
	{@shuffle($widget_info->content_items)}
<!--@end-->
{@$_imgidx=1}
<div class="{$skin_id">
	<ul id="{$skin_id}">
<!--@foreach($widget_info->content_items as $key => $item)-->
	{@$playno = "player".mt_rand()}
	{@$subtitle = $item->getSubTitle()}
	{@$previewfile = $item->getPreview()}

		<!--@if($widget_info->target_ext_var=='link')-->
			<!--@if($item->getPlayer())-->
			{@$playfileinfo = $item->getPlayer()}
			<!--@else-->
				<!--@if($item->getLinkedType()!="")-->
					{@$playfileinfo = $item->getLink()}
				<!--@else-->
					{@$playfileinfo = ""}
				<!--@end-->
			<!--@end-->
		<!--@elseif($widget_info->target_ext_var!='link')-->
			<!--@if($item->getPlayer())-->
			{@$playfileinfo = $item->getPlayer()}
			<!--@else-->
			{@$playfileinfo = ""}
			<!--@end-->
		<!--@end-->

	<!--@if($playfileinfo!="")-->
	<li><div id="{$playno}">Loading the player ...</div></li>
		<script type="text/javascript">
			jwplayer("{$playno}").setup({
				flashplayer: "{$playerinfo}",
				file: "{$playfileinfo}",
				<!--@if(preg_match('/\.(jpg|gif|png)$/i',$previewfile))-->
				image: '{$previewfile}',
				<!--@end-->
				width: {$widget_info->slider_img_width},
				height: {$widget_info->slider_img_height},
				plugins: {sharing: { link: false }},
				<!--@if($subtitle)-->
				plugins: "captions", "captions.file": "{$subtitle}", dock:true,
				<!--@end-->
				stretching: "exactfit",
				wmode: "opaque",
				autostart: false
			});
		</script>
	<!--@elseif($playfileinfo=="")-->
			<!--@if($item->getThumbnail())-->
				<li>
		<!--@if($widget_info->open_article=='Z')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getPreview()}" rel='prettyPhoto[mixed]' />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@elseif($widget_info->open_article=='Y')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@else-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@end-->
		<!--@else-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@end-->
				<img src="{$item->getImgslider()}" width="{$widget_info->slider_img_width}" height="{$widget_info->slider_img_height}" alt='{$item->getTitle($widget_info->subject_cut_size)}' <!--@if($widget_info->img_fade=='Y'&&$widget_info->open_article!='N')-->class='fade'<!--@end--> />
				</a>
				</li>
			<!--@else-->
				<!--@if($widget_info->show_content_title=='Y')-->
					<li> 
						<div class="textSlide">
							<h3 class="textT1_{$skin_id}"><a href="{$item->getDocumentSrl()}">{$item->getTitle($widget_info->subject_cut_size)}</a></h3>
							<p style="text-align:left" class="textC1_{$skin_id}">{$item->getContent($widget_info->content_cut_size)}</p>
						</div>
					</li>
				<!--@end-->
			<!--@end-->
	<!--@end-->
<!--@end-->
	</ul>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#{$skin_id}').anythingSlider({
			enablePlay      : true,
			autoPlay        : false,
			pauseOnHover    : true,
			toggleControls  : false,
			startStopped    : false, // If autoPlay is on, this can force it to start stopped
			buildArrows		: <!--@if($widget_info->show_control=='Y')-->true<!--@else-->false<!--@end-->,
			buildNavigation : <!--@if($widget_info->navigation_control=='Y')-->true<!--@else-->false<!--@end-->,
			width           : {$widget_info->slider_img_width},   // Override the default CSS width
			height          : {$widget_info->slider_img_height},
			theme           : 'metallic',
			autoPlayLocked  : false,  // If true, user changing slides will not stop the slideshow
			delay           : {$widget_info->slide_delay}
		});
<!--@if($widget_info->open_article!='N'||$widget_info->target_ext_var=='link'||$widget_info->target_ext_var=='image')-->
	if ($.browser.msie && $.browser.version < 7) return; // Don't execute code if it's IE6 or below cause it doesn't support it.
	$(".fade").fadeTo(1, 1);
	$(".fade").hover(function () {
		$(this).fadeTo("fast", 0.33);
	}, function () {
		$(this).fadeTo("slow", 1);
	});
	$("#{$skin_id}").find("a[rel^='prettyPhoto']").prettyPhoto({theme:'{$prettyPhoto_theme}'});

	$("a[rel^='prettyPhoto']").each(function() {
		var $image = jQuery(this).contents("img");
		$newclass = 'no_image';
		if($(this).attr('href').toLowerCase().match(/youtube\.com\/watch/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/vimeo\.com/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(mov|swf)/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(jpg|gif|jpeg|png)/i)) $newclass = 'lightbox_image';
		else $(this).removeClass("fade");
		var $padding_x = parseInt($image.css('padding-left')) + parseInt($image.css('padding-right')),
			$padding_y = parseInt($image.css('padding-top')) + parseInt($image.css('padding-bottom')),
			$margin_x = parseInt($image.css('margin-left')) + parseInt($image.css('margin-right')),
			$margin_y = parseInt($image.css('margin-top')) + parseInt($image.css('margin-bottom')),
			$border_x = parseInt($image.css('border-left-width')) + parseInt($image.css('border-right-width')),
			$border_y = parseInt($image.css('border-top-width')) + parseInt($image.css('border-bottom-width'));
		$height = parseInt($image.height()) + $margin_x + $padding_x + $border_x;
		$width = parseInt($image.width()) + $margin_y +  $padding_y + $border_y;
		$pos =  $image.position();
		$(this).addClass($newclass).css({height:$height, width:$width, top:$pos.top, left:$pos.left});
	});
<!--@end-->
	});
</script>
